<!--
 * @Author: 260156 260156@gree.com.cn
 * @Date: 2022-08-01 15:36:52
 * @LastEditors: 260156 260156@gree.com.cn
 * @LastEditTime: 2022-08-18 16:55:48
 * @FilePath: \gree-zst-web\src\views\manage\user\user.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 260156 260156@gree.com.cn, All Rights Reserved. 
-->
<template>
  <div class="user">
    <div class="user-left">
      <organization-tree @handleClick="handleClickOrgTree"></organization-tree>
    </div>
    <div class="user-right">
      <user-header
        v-model:user="user"
        @handleSearch="handleSearch"
        @handle-download="handleDownload"
      ></user-header>
      <user-main
        :tableData="tableData"
        @handleSearch="handleSearch"
        :loading="loading"
      ></user-main>
      <user-footer
        :total="pageData.total"
        v-model:current-page="pageData.currentPage"
        v-model:page-size="pageData.pageSize"
        @change="handlePageChange"
      >
      </user-footer>
    </div>
  </div>
</template>
<script lang="ts" setup>
import UserHeader from "./components/UserHeader.vue";
import UserMain from "./components/UserMain.vue";
import UserFooter from "./components/UserFooter.vue";
import OrganizationTree from "./components/OrganizationTree.vue";
import type { PageData } from "@/components/pagination/types";

import { getUserList, downloadUser } from "@/api/manage/manage";
import type {
  UserListItem,
  GetUserListParams,
  OrganizationId,
} from "@/api/manage/model/manage";
import type { TableItem } from "views/manage/organization/types";
import { useManageStore } from "store/modules/manage";

const loading = ref(false);
const user = ref("");
const depId = ref<OrganizationId>(0);
const tableData = ref<UserListItem[]>([]);

const pageData: PageData = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1,
});

let searchParams!: GetUserListParams;
function getTableData() {
  loading.value = true;
  searchParams = {
    pageNum: pageData.currentPage,
    pageSize: pageData.pageSize,
    userName: user.value,
    deptId: depId.value,
  };
  getUserList(searchParams)
    .then((res) => {
      tableData.value = res.list;
      pageData.total = res.total;
    })
    .finally(() => (loading.value = false));
}
function handleSearch() {
  pageData.currentPage = 1;
  getTableData();
}
handleSearch();
function handlePageChange() {
  getTableData();
}

function handleClickOrgTree(params: TableItem) {
  depId.value = params.id;
  handleSearch();
}

function handleDownload() {
  downloadUser(searchParams, { fileName: "用户管理" });
}

// 获取roleList
const manageStore = useManageStore();
if (manageStore.roleList.length === 0) {
  manageStore.getAllRoleList();
}
// 获取组织树
if (manageStore.organizationTree.length === 0) {
  manageStore.getOrganizationList();
}
</script>

<style lang="scss" scoped>
@use "styles/mixins.scss" as *;
.user {
  @include setFlex();
  align-items: flex-start;
  > div {
    flex: 1 1 auto;
  }
  &-left {
    width: 436px;
    min-width: 250px;
    border: 1px solid #dddddd;
    margin-right: 20px;
  }
  &-right {
    width: 1075px;
  }
}
</style>
